<template>
  <image :class="['Banner-container', bannerId]" v-if="banner" :src="banner.img" @click="goTo"></image>
</template>

<script>
import {mapGetters} from 'vuex'

export default {
  name: 'BannerView',
  props: ['bannerId'],
  data() {
    return {}
  },
  computed: {
    ...mapGetters(['banners']),
    banner() {
      if (this.banners) {
        const list = this.banners.filter(item => item.bannerId === this.bannerId)
        return list[0]
      }
    }
  },
  methods: {
    goTo() {
      uni.navigateTo({
        url: this.banner.href
      })
    }
  }
}
</script>

<style lang='scss'>
.Banner-container {

  border-radius: 20rpx;
  background-color: #f9f9f9;

  &.home-top {
    margin: 18px 20px 0;
    width: 678upx;
    height: 160upx;
  }

  &.home-bottom {
    margin: 18px 20px 0;
    width: 678upx;
    height: 160upx;
  }

  &.mine {
    height: 160upx;
    width: 690upx;
    margin: 30upx;
    margin-top: 0;
  }
}
</style>
